<template>
  <div>
    <h2>简易的留言板 Vue3.0</h2>
    <h3>count -- {{count }}</h3>
    <h3>num -- {{num }}</h3>
    <div>
      <p>msg == {{msg}}</p>
      <hr>
      <div>
        <h4>展示留言</h4>
        <ul>
          <li v-for="(l,i) in list" :key="i">
              <p>序号: {{i+1}}</p>
              <p>标题: {{l.title}}</p>
              <p>内容: {{l.content}}</p>
              <p> <el-button size="mini" type="primary" @click="updateOne(l,i)" >修改</el-button>
                  <el-button size="mini"  type="success" @click="delOne(l,i)">删除</el-button>
              </p>
          </li>
        </ul>
      </div>
      <div>
        <h4>添加留言</h4>
        <p>
          <input type="text" placeholder="请输入留言标题" v-model="comment.title">
        </p>
        <p>
          <input type="text" placeholder="请输入留言内容" v-model="comment.content">
        </p>
        <el-button type="warning" @click="addComment">添加留言</el-button>
      </div>
    </div>
     <el-row v-if="false">
      <el-button @click="changeNum(199)">Num add </el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  </div>
</template>

<script>
import {useRouter} from "vue-router"
import {useStore} from "vuex"
import {reactive,toRefs,onMounted} from "vue"
import { ajax } from '../service';
export default {
  data(){
    return {
      count:2107
    }
  },
  mounted(){
    console.log(this)
  },
  setup(){
    // 独立的空间
    // 数据和方法处理好  当做props return 给组件
    // 没有this   纯函数写法  
    const router = useRouter()
    const store = useStore()
    const state = reactive({
       msg:"2107-一天一个转介绍-一个500",
       comment:{},
       list:[
       ]
    })

    const addComment = async ()=>{
      console.log(state.comment)
      const {code,result} = await ajax.addcomment(state.comment);
      // state.list.push(state.comment)
      if(code==200){
        getcommentlist()
      }
      
      state.comment = {}
      
    }
    const delOne = async (l,i)=>{
      const {code,result} = await ajax.delcomment({_id:l._id})
      if(code==200){
        state.list.splice(i,1)
      }
    }

    const updateOne = async  (l,i)=>{

      var value = window.prompt(l.title,l.content);
      if(value){
          const {code,resukt} = await ajax.setcomment({
            _id:l._id,
            content:value
          })
          if(code==200){
            state.list.splice(i,1,{...l,content:value})
          }
      }
    }

    const checkTest = async ()=>{
      const res = await ajax.gettest();
    }

    const getcommentlist = async ()=>{
      const {code,result} = await ajax.getcommentlist()
      state.list = result;
    }

    // 组件载入 
    onMounted(()=>{
      checkTest()
      getcommentlist()
    })

    // props 
    return {
      ...toRefs(state),  // 返回一个对象 以对象解构的形式
      addComment,
      delOne,
      updateOne
    }
  }
}
</script>
